<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs } from 'vue'
// 引入路由
import { useRouter, useRoute } from 'vue-router'
import { userInfo } from '../../stores/default'
import axios from 'axios';
import { ElMessage } from 'element-plus'
const user = userInfo()
const urlGo = import.meta.env.VITE_backurl_go

onMounted(() => {
  // 获取当前路由
  activeMenu.value = router.currentRoute.value.path.split('/')[1]
  let currentPath = router.currentRoute.value.path.split('/')[1]
  if (currentPath.includes('Fore')) {
    activeMenu.value = '1'
  } else if (['user', 'role', 'right', 'log', 'setting'].includes(currentPath)) {
    activeMenu.value = '3'
  } else if (currentPath.includes('index')) {
    activeMenu.value = '0'
  } else {
    activeMenu.value = '2'
  }

  userId.value = sessionStorage.getItem('userId')
  axios({
    method: 'get',
    url: urlGo + '/sys/getUser',
    params: {
      userId: userId.value
    }
  }).then(res => {
    console.log(res);
    let rightSet = new Set()
    res.data.data?.role?.forEach(role => {
      role.right.forEach(right => {
        right.router.split(',').forEach(v => {
          rightSet.add(v)
        })
      })
    })
    let rightArr = Array.from(rightSet)
    user.setValue({
      ...res.data.data,
      rightArr: rightArr
    })

    res.data.data.role.forEach(role => {
      role.right.forEach(right => {
        if (right.router == '') return
        rightList.value.push(right.router.split(','))
      })
    })
    rightList.value = Array.from(new Set(rightList.value.flat()))
  })

  let timer = null
  timer = setTimeout(() => {
    ElMessage.warning('登录超时，请重新登录')
    sessionStorage.clear()
    router.push('/login')
  }, 1000 * 60 * 30)
  document.onmousemove = function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      ElMessage.warning('登录超时，请重新登录')
      sessionStorage.clear()
      router.push('/login')
    }, 1000 * 60 * 30)
  }
})

const rightList = ref([])

const userId = ref('')

function getcookie(objname) {//获取指定名称的cookie的值

  var arrstr = document.cookie.split("; ");

  for (var i = 0; i < arrstr.length; i++) {

    var temp = arrstr[i].split("=");

    if (temp[0] == objname) return decodeURI(temp[1]);

  }
}
// 使用路由
const router = useRouter()
const route = useRoute()
const props = defineProps({
  values: {
    type: Array,
    default: () => [
      {
        name: '首页',
        path: 'index'
      },
      {
        name: "船舶",
        path: 'chuanbo',
      },
      {
        name: '港口',
        path: 'gangkou'
      },
      {
        name: '航程',
        path: 'hangcheng'
      },
      {
        name: '系统管理',
        path: 'system'
      },
    ]
  }
})
const { values } = toRefs(props)

const currentMenu = ref(-1)
const selectedMenu = ref(-1)

const handleIn = (idx) => {
  currentMenu.value = idx
}
const handleOut = (idx) => {
  currentMenu.value = -1
}
const activeMenu = ref('1')
const routerTo = (path, idx) => {
  activeMenu.value = idx
  router.push(path)
  // 保持缓存
  // router.push({ path: path, query: { keepAlive: true } })


}

const activeMenuStyle = reactive({
  color: '#1890ff',
  borderBottom: '4px solid #1890ff'
})
</script>

<template>
  <div class="Menu">
    <div v-for="(item, idx) in values" :key="item.name" class="menu_item" @mouseenter="handleIn(idx)"
      @mouseleave="handleOut(idx)" :class="item.data ? 'menu_item_one' : 'menu_item_one'"
      :style="activeMenu == idx ? activeMenuStyle : ''" v-show="rightList.includes(item.path)"
      @click="routerTo(item.path, idx)">
      <span>
        {{ item.name }}
      </span>
      <!-- <Transition name="fade">item.name != '系统管理' || userId == '1'
        <div class="menu_item_sub" v-show="currentMenu == idx && item.data">
          <div class="menu_item_sub_item" v-for="v in item.data">
            <span class="menu_item_sub_item_span" @click="routerTo(v.path)">
              {{ v.name }}
            </span>
            <Transition name="fade">
              <div class="menu_item_sub_item_sub" v-show="currentMenu == idx && v.data && v.data">
                <div class="menu_item_sub_item_sub_item" v-for="vv in v.data">
                  <span class="menu_item_sub_item_sub_item_span">
                    {{ vv.name }}
                  </span>
                </div>
              </div>
            </Transition>
          </div>
        </div>
      </Transition> -->
    </div>
  </div>
</template>

<style lang='less' scoped>
.Menu {
  display: flex;
  align-items: center;

  .menu_item {
    margin-left: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
    transform: translateY(2px); //平衡边框带来的位置变化

    &.menu_item_one {
      &:hover {
        color: #1890ff;
        border-bottom: 4px solid #1890ff;
      }
    }

    span {
      font-size: 20px;
      font-weight: 600;
    }

    .menu_item_sub {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);

      // min-width: 150px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      padding: 10px;
      color: black;
      display: flex;
      // 不换行
      white-space: nowrap; //不换行

      .menu_item_sub_item {
        padding: 0px 20px;

        .menu_item_sub_item_span {
          font-size: 18px;
          font-weight: 500;
          transition: all 0.15s ease;

          // font-family: '幼圆';

          &:hover {
            color: #1890ff;
          }
        }

        .menu_item_sub_item_sub {
          margin-top: 5px;
          border-top: 1px solid #8e8e8e;

          .menu_item_sub_item_sub_item {
            padding-top: 10px;

            .menu_item_sub_item_sub_item_span {
              font-size: 14px;
              font-weight: 400;
              transition: all 0.15s ease;

              // font-family: '幼圆';
              &:hover {
                color: #1890ff;
              }
            }
          }

        }

      }
    }
  }
}
</style>